
// 隔空传递 
// context 隔空传递数据
// 数据嵌套太深  props   
// props 一级一级往里面传递数据    比较麻烦  
// context 隔空传递   this.context 

// redux    
// mobx        运用 context API  

// https://segmentfault.com/a/1190000004636213  

import PropTypes from "prop-types"

export class ContextDemo extends Component{
  state = {
    word:"2107 - 天道酬勤 ",
    count:8899
  }
  getChildContext(){
    return {
      word:this.state.word,
      count:this.state.count 
    }
  }
  change=()=>{
    this.setState({
      count:++this.state.count
    })
  }
  render(){
    console.log(this)
    return (
      <div>
        <h2>Context - 隔空传递数据 </h2>
        <h2>msg--- {this.props.msg}</h2>
        <button onClick={this.change}>点击修改 count</button>
        <hr/>
        <CptA
        msg={this.props.msg}
        ></CptA>
      </div>
    )
  }
}

ContextDemo.defaultProps = {
  msg:"2107-daydayup"
}
ContextDemo.propTypes = {
  msg:PropTypes.string.isRequired 
}
ContextDemo.childContextTypes={
  word:PropTypes.string.isRequired,
  count:PropTypes.number 
}

class CptA extends Component{
  render(){
    return (
      <div>
        <h2>
        CptA - CptA - 1 
        </h2>
        <hr/>
        <CptB msg={this.props.msg}></CptB>
      </div>
    )
  }
}

class CptB extends Component{
  render(){
    return (
      <div>
        <h2>
        CptB - CptB - 2
        </h2>
        <hr/>
        <CptC msg={this.props.msg}></CptC>
      </div>
    )
  }
}

class CptC extends Component{
  render(){
    return (
      <div>
        <h2>
        CptC - CptC - 3
        </h2>
        <h2>count -- {this.context.count }</h2>
        <hr/>
        <CptD msg={this.props.msg}></CptD>
      </div>
    )
  }
}
CptC.contextTypes = {
  count:PropTypes.number 
}

class CptD extends Component{
  render(){
    console.log(this.context)
    return (
      <div>
        <h2>
        CptD - CptD - 4
        </h2>
        <p>msg --- {this.props.msg} </p>
        <h4>word == {this.context.word}</h4>
      </div>
    )
  }
}

// 获取context
CptD.contextTypes = {
  word:PropTypes.string.isRequired,
}